/*
 * @Author: zhangzhen
 * @Date: 2022-07-05 09:43:46
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-04-18 10:19:13
 * @Description:
 *
 */
import styles from './index.module.scss'
import HomePage from '../pages/index'
import { setStorage, configs, iconArr, backgroundImg } from '../redux/constant'
import { AppstoreOutlined, PictureOutlined } from '@ant-design/icons'
import { Drawer } from 'antd'
import { useEffect, useState } from 'react'
import DrawPage from './drawBox'
import { useAppSelector, useAppDispatch } from '@/redux/hook'
import { setConfigs, setIconArr, setBackgroundImg } from '@/redux/slice'
import { shallowEqual } from 'react-redux'
import BackgroundImgBox from './backgroundImg'

const App = () => {
  const { nowImg } = useAppSelector(({ state }) => ({ ...state }), shallowEqual)
  const dispatch = useAppDispatch()

  const [visible, setVisible] = useState(false)
  const [bgcVisible, setBgcVisible] = useState(false)
  useEffect(() => {
    if (!window.localStorage.getItem('configs')) {
      setStorage()
      dispatch(setIconArr(iconArr))
      dispatch(setConfigs(configs[0]))
      dispatch(setBackgroundImg(backgroundImg))
    }
  }, [])

  useEffect(() => {
    function handleKeyDown(e: any) {
      if (e.keyCode === 27) {
        setBgcVisible(false)
      }
    }
    document.addEventListener('keydown', handleKeyDown)
    return () => {
      document.removeEventListener('keydown', handleKeyDown)
    }
  }, [])

  return (
    <div
      className={styles.navs}
      style={{
        backgroundImage: `url(${nowImg})`
      }}
    >
      <PictureOutlined
        style={{
          position: 'absolute',
          right: '60px',
          top: '15px',
          color: 'black',
          fontSize: '20px',
          cursor: 'pointer'
        }}
        onClick={() => {
          setBgcVisible(true)
        }}
      />
      <AppstoreOutlined
        style={{
          position: 'absolute',
          right: '20px',
          top: '15px',
          color: 'black',
          fontSize: '20px'
        }}
        onClick={() => {
          setVisible(true)
        }}
      />
      <HomePage />
      <Drawer
        mask
        open={visible}
        maskClosable
        title="设置"
        placement="right"
        onClose={() => {
          setVisible(false)
        }}
      >
        <DrawPage />
      </Drawer>
      <Drawer
        mask
        open={bgcVisible}
        maskClosable
        height={220}
        headerStyle={{ height: '20px' }}
        bodyStyle={{ background: 'rgba(255,255,255,0.5)' }}
        placement="top"
        onClose={() => {
          setBgcVisible(false)
        }}
      >
        <BackgroundImgBox />
      </Drawer>
    </div>
  )
}

export default App
